<template>
  <div class="container-pt">
    <van-nav-bar fixed title="详情" @click-left="$router.back()" left-arrow />
    <div class="content-box">
      <div class="art-tit">{{ indexList.title }}</div>
      <div class="art-desc">
        <span>时间:2021-11-02</span>
        <span>分类：{{ indexList.tags }}</span>
        <span>阅读({{ indexList.click }})</span>
      </div>
      <van-divider />
      <div class="art-content" v-html="indexList.content"></div>
    </div>
    <van-cell>
      <h3 slot="title" class="group-title">相关推荐</h3>
    </van-cell>
    <recommend-list :list="redList" />
    <van-grid clickable class="bot" :column-num="2">
      <van-grid-item
        :class="{ active: indexList.isLike !== false }"
        @click="clickData(2)"
        icon="like-o"
        text=""
      />
      <van-grid-item
        :class="{ active: indexList.isCollect !== false }"
        @click="clickData(1)"
        icon="thumb-circle-o"
        text=""
      />
    </van-grid>
  </div>
</template>

<script>
import { getIndexApi, getClickHandler } from "../api/article";
import RecommendList from "../components/recommend-list.vue";
export default {
  name: "Show",
  components: { RecommendList },
  data() {
    return {
      indexList: [],
      redList: [],
      action: "",
      haoping: "",
    };
  },
  methods: {
    async indexData() {
      const { data } = await getIndexApi(this.$route.params.id);
      const { info, recommend } = data;
      this.indexList = info;
      // console.log(info.isLike);
      // console.log(info.isCollect);
      this.redList = recommend;
    },
    filterTag(val) {
      return val.replace(/<[^>]+>/g, "");
    },
    async clickData(type) {
      if (type === 1) {
        if (this.indexList.isCollect === false) {
          this.action = "add";
          this.haoping = "点赞";
        } else {
          this.action = "del";
          this.haoping = "取消点赞";
        }
      }
      if (type === 2) {
        if (this.indexList.isLike === false) {
          this.action = "add";
          this.haoping = "收藏";
        } else {
          this.action = "del";
          this.haoping = "取消收藏";
        }
      }
      const res = await getClickHandler({
        type: type,
        article_id: this.indexList.id,
        action: this.action,
      });
      this.$toast({
        message: this.haoping + res.data,
        icon: "like-o",
      });
      this.indexData();
      // console.log(res);
    },
  },
  created() {
    this.indexData();
  },
};
</script>
<style scoped lang="less">
.content-box {
  padding: 20px 20px;
}
.art-tit {
  font-size: 36px;
  line-height: 44px;
  margin-bottom: 20px;
}
.art-desc {
  font-size: 28px;
  color: #aaa;
  span {
    margin-right: 20px;
  }
}
.bot {
  position: fixed;
  bottom: 0;
  width: 100%;
}
/deep/ .van-grid-item__content {
  padding: 20px 0;
}
/deep/ .van-grid-item__text {
  margin-top: 0 !important;
}
.group-title {
  color: #1989fa;
}
.active {
  color: pink;
}
/deep/ .art-content p img {
  width: 80%;
}
</style>